<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>品优购 - 优质！优质！</title>
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/page-list.css">
</head>

<body>
    <!--页面顶部-->
    <div id="nav-bottom">
        <!--顶部-->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <ul class="fl">
                            <li class="f-item">品优购欢迎您！</li>
                            <li class="f-item content">请
                                <a href="login.html">登录</a>
                                <span>
                                    <a href="register.html" class="col-red">免费注册</a>
                                </span>
                            </li>
                        </ul>
                        <ul class="fr">
                            <li class="f-item">
                                <a href="member-order.html">我的订单</a>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">
                                <a href="member.html">我的品优购</a>
                                <i class="iconfont fr"></i>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">品优购会员</li>
                            <li class="f-item space"></li>
                            <li class="f-item">企业采购</li>
                            <li class="f-item space"></li>
                            <li class="f-item">关注品优购
                                <i class="iconfont fr"></i></li>
                            <li class="f-item space"></li>
                            <li class="f-item">客服服务
                                <i class="iconfont fr"></i>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">网站导航
                                <i class="iconfont fr"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo pr">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="品优购" href="home.html"></a>
                        </div>
                        <div class="yui3-u left secKill">
                            <img src="./uploads/secKill_03.png" alt="">
                        </div>
                        <div class="yui3-u Center searchArea">
                            <div class="search">
                                <form action="" class="sui-form form-inline">
                                    <div class="input-append">
                                        <input type="text" id="autocomplete" type="text"
                                            class="input-error input-xxlarge">
                                        <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                    </div>
                                </form>
                            </div>
                            <div class="hotwords">
                                <ul>
                                    <li class="f-item">品优购首发</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">每满99减30</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">办公用品</li>
                                </ul>
                            </div>
                        </div>
                        <div class="yui3-u Right shopArea">
                            <div class="fr shopcar">
                                <div class="show-shopcar">
                                    <span class="car"></span>
                                    <a class="sui-btn btn-default btn-xlarge" href="cart.html">
                                        <span>我的购物车</span>
                                        <i class="shopnum">0</i>
                                        <i class="iconfont"></i>
                                    </a>
                                    <div class="clearfix shopcarlist"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="yui3-g NavList">
                        <ul class="nav">
                            <li class="f-item"><a href="#">品优秒杀</a></li>
                            <li class="f-item"><a href="#">即将售罄</a></li>
                            <li class="f-item"><a href="#">超值低价</a></li>
                            <li class="f-item"><a href="#">女装</a></li>
                            <li class="f-item"><a href="#">女鞋</a></li>
                            <li class="f-item"><a href="#">男装</a></li>
                            <li class="f-item"><a href="#">男鞋</a></li>
                            <li class="f-item"><a href="#">母婴童装</a></li>
                            <li class="f-item"><a href="#">食品</a></li>
                            <li class="f-item"><a href="#">智能数码</a></li>
                            <li class="f-item"><a href="#">运动户外</a></li>
                            <li class="f-item"><a href="#">更多分类</a>
                                <i class="iconfont"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--list-content-->
    <div class="main">
        <div class="py-container">
            <div class="secBuy">
                <a href="#">
                    <img src="./uploads/bg_03.png" alt="">
                </a>
            </div>
            <div class="goods-list">
                <ul class="yui3-g liebiao">
                    <!-- <li class="yui3-u-1-5">
                        <div class="p-img">
                            <a href="item.html"><img src="uploads/mobile.png"></a>
                        </div>
                        <div class="attr"><em>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机 </em></div>
                        <div class="price"><strong><em>¥</em><i>6088.00</i></strong><s>￥6988</s></div>
                        <div class="sold"><span>已售87%</span><img src="./uploads/state_07.png" alt=""><span>剩余29件</span>
                        </div>
                        <div class="operate">
                            <a href="cart-add.html">立即抢购</a>
                        </div>
                    </li> -->
                </ul>
                <div class="fenye"></div>
            </div>
        </div>

    </div>
    </div>

    <!--页面底部-->
    <div class="clearfix footer">
        <div class="py-container">
            <div class="footlink">
                <div class="Mod-service">
                    <ul class="Mod-Service-list">
                        <li class="grid-service-item intro  intro1">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro2">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>极速物流</h4>
                                <p>急速物流，急速送达</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro  intro3">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>无忧售后</h4>
                                <p>7天无理由退换货</p>
                            </div>
                        </li>
                        <li class="grid-service-item  intro intro4">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>特色服务</h4>
                                <p>私人定制家电套餐</p>
                            </div>
                        </li>
                        <li class="grid-service-item intro intro5">
                            <i class="serivce-item fl"></i>
                            <div class="service-text">
                                <h4>帮助中心</h4>
                                <p>您的购物指南</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clearfix Mod-list">
                    <div class="yui3-g">
                        <div class="yui3-u-1-6">
                            <h4>购物指南</h4>
                            <ul class="unstyled">
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>生活旅行/团购</li>
                                <li>常见问题</li>
                                <li>购物指南</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>配送方式</h4>
                            <ul class="unstyled">
                                <li>上门自提</li>
                                <li>211限时达</li>
                                <li>配送服务查询</li>
                                <li>配送费收取标准</li>
                                <li>海外配送</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>支付方式</h4>
                            <ul class="unstyled">
                                <li>货到付款</li>
                                <li>在线支付</li>
                                <li>分期付款</li>
                                <li>邮局汇款</li>
                                <li>公司转账</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>售后服务</h4>
                            <ul class="unstyled">
                                <li>售后政策</li>
                                <li>价格保护</li>
                                <li>退款说明</li>
                                <li>返修/退换货</li>
                                <li>取消订单</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>特色服务</h4>
                            <ul class="unstyled">
                                <li>夺宝岛</li>
                                <li>DIY装机</li>
                                <li>延保服务</li>
                                <li>品优购E卡</li>
                                <li>品优购通信</li>
                            </ul>
                        </div>
                        <div class="yui3-u-1-6">
                            <h4>帮助中心</h4>
                            <img src="assets/img/wx_cz.jpg">
                        </div>
                    </div>
                </div>
                <div class="Mod-copyright">
                    <ul class="helpLink">
                        <li>关于我们<span class="space"></span></li>
                        <li>联系我们<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>商家入驻<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们<span class="space"></span></li>
                        <li>营销中心<span class="space"></span></li>
                        <li>友情链接<span class="space"></span></li>
                        <li>关于我们</li>
                    </ul>
                    <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
                    <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
    </div>
    <!--页面底部END-->


</body>
<script src="./js/page.js"></script>
<script src="./js/utils.js"></script>
<script>
    var ul = document.querySelector('.liebiao');
    var fenye = document.querySelector('.fenye')
    // 规定当前的对应的页数
    var current = 1
    requestData()

    function requestData() {
        sendAjax({
            // 获取商品列表请求地址
            url: 'http://localhost:8888/goods/list',
            data: {
                current,
                pagesize:8

            },
            success: res => {
                // console.log(res);
                var {
                    code,
                    list,
                    total
                } = res;
                // 检测登录状态
                if (code === 1) {
                    var str = ''
                    console.log(list);
                    list.forEach(v => {
                        
                        str += `
                        <li class="yui3-u-1-5">
                                <a href="#">
                                    <img src="${v.img_big_logo}" alt="">
                                </a>
                                <span class="price">￥${v.price}</span>
                                <br>
                                <span class="title attr"><em>${v.title}</em></span>
                            
                            <div class="operate">
                            <a href="item.html?id=${v.goods_id}">立即抢购</a>
                        </div>    
                        </li>
                    `

                    })
                    // console.log(str);
                    ul.innerHTML = str
                    var pageStr = `
                        <div class="first" onclick="first()">首页</div>
                        <div class="prev" onclick="prev()">上一页</div>
                        <div class="list">
                    `
                    if (total <= 5) {
                        pageStr += createP(1, total)
                    } else {
                        if (current <= 3) {
                            pageStr += createP(1, 5)
                        } else if (current >= total - 2) {
                            pageStr += createP(total - 4, total)
                        } else {
                            pageStr += createP(current - 2, current + 2)
                        }
                    }
                    pageStr += `
                        </div>
                        <div class="next" onclick="next(${total})">下一页</div>
                        <div class="last" onclick="last(${total})">尾页</div>
                    `
                    fenye.innerHTML = pageStr
                }
            }
        })
    }
    // 点击上一页的函数
    function prev() {
        current--
        if (current < 1) {
            current = 1
            return
        }
        requestData()
    }
    // 点击首页的函数
    function first() {
        if (current === 1) {
            return
        }
        current = 1
        requestData()
    }
    // 点击尾页的函数
    function last(total) {
        if (current === total) {
            return
        }
        current = total
        requestData()
    }
    // 点击下一页的函数
    function next(total) {
        current++
        if (current > total) {
            current = total
            return
        }
        requestData()
    }
    // 点击页码的函数
    function toCurrent(i) {
        if (current === i) {
            return
        }
        current = i
        requestData()
    }
    // 创建页码p标签的函数
    function createP(start, end) {
        var str = ''
        for (var i = start; i <= end; i++) {
            if (i === current) {
                str += `
                <p onclick="toCurrent(${i})" class="active">${i}</p>
            `
            } else {
                str += `
                <p onclick="toCurrent(${i})">${i}</p>
            `
            }
        }
        return str
    }

    var username = getCookie('username')
    // 判断用户的状态所呈现的页面（登录时和未登录时）
    if (username) {
        // 获取到登录状态则修改为已登录时的界面
        document.querySelector('.content').innerHTML = `
            欢迎<b>${username}</b>登录
            <span onclick = "logout()">注销</span>
            `

    }

    function logout() {
        removeCookie('username')
        document.querySelector('.content').innerHTML = `
        <li class="f-item content">请
            <a href="login.html">登录</a>
            <span>
            <a href="register.html">免费注册</a>
            </span>
        </li>
            `
    }
    if(!username) {
    document.querySelector('.content').onclick = function(){
        localStorage.setItem('url', location.href)
            location.href = 'login.html'
    }
}
</script>

</html>